<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ include file="../../../attr.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html>
<head>

    <meta http-equiv="X-UA-Compatible" content="IE=emulateIE7"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="${ctx}/css/sapar.css"/>
    <link rel="stylesheet" type="text/css" href="${ctx}/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="${ctx}/css/kkpager_blue.css"/>
    <script type="text/javascript" src="${ctx}/js/jquery.js"></script>
    <script type="text/javascript" src="${ctx}/js/sapar.js"></script>
    <script type="text/javascript" src="${ctx}/js/WdatePicker.js"></script>
    <script type="text/javascript" src="${ctx}/assets/layer/layer.js"></script>
    <script type="text/javascript" src="${ctx}/js/kkpager.min.js"></script>
    <script type="text/javascript" src="${ctx}/assets/laydate/laydate.js"></script>
    <script type="text/javascript" src="${ctx}/js/mask.js"></script>

    <script type="text/javascript" src="${ctx}/js/LodopFuncs.js"></script>
    <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0>
        <embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0></embed>
    </object>

    <title>灭菌开始</title>
    <style type="text/css">
        #lefttable {
            border: 1px solid #bdd0db;
            height: 68px;
        }

        .xuanzhong {
            color: red;
        }

        #tb {
            height: 147px;
        }

        #second {
            width: 50%;
            height: 68px;
            border: 1px solid #bdd0db;
        }

        #three {
            height: 68px;
        }

        th {
            text-align: center;
        }

        td {
            text-align: center;
        }

        #cc {
            margin-left: 30px;
        }

        .searchTxt {
            width: 110px;
        }

        .table table {
            border: 0;
        }
    </style>
</head>

<body>
<div id="mask" class="mask"></div>
<div id="saper-container">
    <div id="saper-hd"></div>
    <div id="saper-bd">
        <audio src="../audio/Beep_Short.mp3" id="audio"></audio><!-- 成功提示音 -->
        <audio src="../audio/Alarm_Clock (1).mp3" id="audio1"></audio><!-- 失败提示音 -->
        <form class="saper-form">
            <div class="subfiled-content" id="tb">
                <!--表格开始-->
                <div class="kv-item clearfix">
                    <label>灭菌程序：</label>
                    <div class="kv-item-content">
                        <input type="text" placeholder="灭菌程序" class="searchTxt" name="miejunRuanjianTiaoma" id="mjcx"/>
                    </div>
                    <label>包条码：</label>
                    <div class="kv-item-content">
                        <input type="text" placeholder="包条码" class="searchTxt" name="wupinbaoTiaoma" id="mjb">
                    </div>
                    <label>灭菌人：</label>
                    <div class="kv-item-content">
                        <input type="text" placeholder="灭菌人" name="miejunMeijunrenTiaoma" class="searchTxt" id="mjr">
                    </div>
                    <div class="kv-item-content" id="cc">
                        <a class="sapar-btn sapar-btn-recom query-btn" href="javascript:;" id="kaishi">开始灭菌</a>
                    </div>

                    <div style="margin-left: 20px;width: 40px" class="kv-item-content">
                        <input style="width: 40px" type="text" readonly placeholder="数量" value="" name="smsl"
                               id="smsl"/>
                    </div>
                    <div style="margin-left: 60px" class="kv-item-content">
                        <a class="sapar-btn sapar-btn-recom query-btn" href="javascript:addPackage();" id="addPackage">添加临床包</a>
                    </div>
                </div>
                <!--表格具体内容-->
                <div class="subfiled clearfix">
                    <h2>设备</h2>
                </div>
                <table>
                    <tr valign="top">
                        <td width="50%" valign="top">
                            <div class="table" id="lefttable">
                                <table id="detail">
                                    <thead>
                                    <tr>
                                        <th>设备编码</th>
                                        <th>设备名称</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </td>
                        <td width="20px"></td>
                        <td width="500px" valign="top" id="second">
                            <div class="table" id="three">
                                <table id="detail1">
                                    <thead>
                                    <tr>
                                        <th>程序编码</th>
                                        <th>灭菌程序</th>
                                    </tr>
                                    </thead>
                                    <tbody id="five">

                                    </tbody>
                                </table>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <div style="float:left ;width: 100%" id="app">
                <div style="width: 50%;float:left ">
                    <div class="subfiled clearfix">
                        <h2>未扫描的包</h2>

                        <div class="kv-item-content" style="padding-left: 300px">
                            <a href="javascript:;" style="margin-left: 20px" class="sapar-btn sapar-btn-recom query-btn"
                               @click="linchuang">临床</a>
                            <a href="javascript:;" style="margin-left: 20px" class="sapar-btn sapar-btn-recom query-btn"
                               @click="shoushushi">手术室</a>

                            <a href="javascript:;" style="margin-left: 20px" class="sapar-btn sapar-btn-recom query-btn"
                               @click="gaowen">高温</a>
                            <a href="javascript:;" style="margin-left: 20px" class="sapar-btn sapar-btn-recom query-btn"
                               @click="diwen">低温</a>

                        </div>
                    </div>
                    <div class="table">
                        <table id="waitPackage">
                            <thead>
                            <tr>
                                <th><input type="checkbox" id="checkall"></th>
                                <th>包条码</th>
                                <th>包名称</th>
                                <th>包灭菌方式</th>
                                <%--<th>关包时间</th>--%>
                                <%--<th>配包审核</th>--%>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="package in packageImformationList" :key="package.packageTiaoma">
                                <td lass="baomingxi">
                                    <input type="checkbox" name="miejunWupinbaoTiaoma"
                                           v-bind:value='package.packageTiaoma'/>
                                </td>
                                <td>{{package.packageTiaoma}}</td>
                                <td>{{package.tbPackageMuban.packageName}}</td>
                                <td>{{dictmap[package.tbPackageMuban.packageMiejunFangshi].dictName}}</td>
                                <td><a href="javascript:;" @click="showmingxi('package.packageId')">查看明细</a></td>
                            </tr>
                            <%--<c:if test="${lstPeibao == null || lstPeibao == '' }">--%>
                            <%--<tr class="no-data product"><td colspan="10" style="color: red">暂时没有数据</td></tr>--%>
                            <%--</c:if>--%>
                            <%--<c:if test="${lstPeibao !=null }">--%>
                            <%--<c:forEach items="${lstPeibao}" var="peibao">--%>
                            <%--<tr  class="baomingxi">--%>
                            <%--<td>--%>
                            <%--<input type="checkbox"  name="miejunWupinbaoTiaoma"  value="${peibao.packageTiaoma}"/>--%>
                            <%--</td>--%>
                            <%--<td>${peibao.packageTiaoma }</td>--%>
                            <%--<td>${peibao.tbPackageMuban.packageName }</td>--%>
                            <%--<td>${dictmap[peibao.tbPackageMuban.packageMiejunFangshi].dictName }</td>--%>
                            <%--&lt;%&ndash;<td><fmt:formatDate value="${peibao.peibaoGuanbaoTime }"&ndash;%&gt;--%>
                            <%--&lt;%&ndash;type="date" pattern="yyyy-MM-dd HH:mm:ss" /></td>&ndash;%&gt;--%>
                            <%--&lt;%&ndash;<td>&ndash;%&gt;--%>
                            <%--&lt;%&ndash;<c:if test="${peibao.peibaoHege ==1 }">&ndash;%&gt;--%>
                            <%--&lt;%&ndash;通过&ndash;%&gt;--%>
                            <%--&lt;%&ndash;</c:if>&ndash;%&gt;--%>
                            <%--&lt;%&ndash;<c:if test="${peibao.peibaoHege !=1 }">&ndash;%&gt;--%>
                            <%--&lt;%&ndash;不通过&ndash;%&gt;--%>
                            <%--&lt;%&ndash;</c:if>&ndash;%&gt;--%>
                            <%--&lt;%&ndash;</td>&ndash;%&gt;--%>
                            <%--<td><a href="javascript:;" onclick="showmingxi('${peibao.tbPackageMuban.packageId }','${peibao.tbPackageMuban.packageName }')">查看明细</a></td>--%>
                            <%--</tr>--%>
                            <%--</c:forEach>--%>
                            <%--</c:if>--%>
                            </tbody>
                        </table>
                    </div>

                </div>

                <div style="width: 50%;float:left ">
                    <div class="subfiled clearfix">
                        <h2>以扫描的包</h2>
                    </div>
                    <div class="table">
                        <table id="okPackage">
                            <thead>
                            <tr>
                                <th><input type="checkbox"></th>
                                <th>包条码</th>
                                <th>包名称</th>
                                <th>包灭菌方式</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div id="saper-ft">

            </div>
        </form>
    </div>
</div>
</body>
<script type="text/javascript" src="${ctx}/js/vue.min.js"></script>
<script>
    window.onload = function () {
        $("#mjcx").focus();
    }

    var num = 0;

    $(function () {
        $(".searchTxt").keydown(function (event) {
            var txt = $("#mjcx").val();
            var txt1 = $("#mjb").val();
            var txt2 = $("#mjr").val();
            var oPlay0 = document.getElementById("audio");
            var oPlay1 = document.getElementById("audio1");
            var cxFocus = $("#mjcx").is(":focus");
            var bFocus = $("#mjb").is(":focus");
            var rFocus = $("#mjr").is(":focus");
            var i = 1;
            if (event.keyCode == 13) {
                if (!isNullOrEmpty(txt) && i == 1) {
                    $.ajax({
                        type: "POST",
                        url: "${ctx}/soft/validSoft.do?softId=" + txt,
                        error: function (request) {
                            layer.alert("网络故障，请稍后再试!");
                        },
                        success: function (data) {
                            if (data.state == "true") {
                                var str = '';
                                $("#detail tbody").empty();
                                var str = "<tr><td>" + data.equip.equipId + "</td><td>" + data.equip.equipName + "</td></tr>";
                                $("#detail tbody").append(str);
                                var str1 = '';
                                $("#detail1 tbody").empty();
                                var str1 = "<tr><td>" + data.soft.softId + "</td><td>" + data.soft.softName + "</td></tr>";
                                $("#detail1 tbody").append(str1);
                                if (true == cxFocus) {
                                    $("#mjb").focus();
                                    var flag = true;
                                    if (flag) {
                                        oPlay0.play();
                                        i = 2;
                                    }
                                }
                                if (true == bFocus && i == 2) {
                                    txt1 = $("#mjb").val();
                                    if (event.keyCode == 13) {
                                        var flag = true;
                                        if (txt1 == ('stop')) {
                                            //结束的提示音
                                            $("#mjr").focus();
                                        } else if (txt1 != null) {
                                            var i = 0;
                                            $('input[name="miejunWupinbaoTiaoma"]').each(function () {
                                                if ($(this).val() == txt1) {
                                                    var that = this;
                                                    i++;
                                                }
                                            });
                                            txt1 = null;
                                        }
                                        if (flag) {
                                            if (i == 1) {
                                                oPlay0.play();
                                            } else {
                                                oPlay1.play();
                                            }
                                        }
                                        $("#mjb").val('');
                                    }
                                }
                                if (rFocus == true && i == 2) {
                                    if (!isNullOrEmpty(txt2)) {
                                        $.ajax({
                                            type: "POST",
                                            url: "${ctx}/employee/findByTioma.do?id=" + txt2,
                                            error: function (request) {
                                                layer.alert("网络故障，请稍后再试!");
                                            },
                                            success: function (data) {
                                                if (data.statue == "true") {
                                                    oPlay0.play();
                                                    $("#kaishi").click();
                                                } else {
                                                    oPlay1.play();
                                                    $("#mjr").val('');
                                                    $("#mjr").focus();
                                                }
                                            }
                                        });
                                    }
                                }
                            } else {
                                oPlay1.play();
                                $("#mjcx").val('');
                                $("#mjcx").focus();
                            }
                        }
                    });
                }
                if (!isNullOrEmpty(txt1) && i == 1) {
                    if (true == bFocus) {
                        txt1 = $("#mjb").val();
                        txt1 = txt1.toUpperCase();


                        if (event.keyCode == 13) {
                            var flag = false;
                            if (txt1 == ('stop')) {
                                //结束的提示音
                                $("#mjr").focus();
                            } else if (txt1 != null) {
                                var i = 0;
                                $('input[name="miejunWupinbaoTiaoma"]').each(function () {
                                    var that = this;
                                    if ($(that).val() == txt1) {
                                        flag = true;
                                        $(that).prop('checked', true);
                                        $("#okPackage").append($(that).parent().parent().clone());
                                        $(that).parent().parent().remove();
//                                    $(this).parent().parent().css("display",'');
                                    }
                                    if ($(that).prop('checked')) {
                                        i++;
                                    }

                                });
                                $("#smsl").val(i);
                                txt1 = null;
                            }
                            if (flag || txt1 == ('stop')) {
                                oPlay0.play();
                            } else {
                                oPlay1.play();
                            }
                            $("#mjb").val('');
                        }
                    }
                }
                if (!isNullOrEmpty(txt2) && i == 1) {
                    if (rFocus == true) {
                        if (!isNullOrEmpty(txt2)) {
                            $.ajax({
                                type: "POST",
                                url: "${ctx}/employee/findByTioma.do?id=" + txt2,
                                error: function (request) {
                                    layer.alert("网络故障，请稍后再试!");
                                },
                                success: function (data) {
                                    if (data.statue == "true") {
                                        oPlay0.play();
                                        $("#kaishi").click();
                                    } else {
                                        oPlay1.play();
                                        $("#mjr").val('');
                                        $("#mjr").focus();
                                    }
                                }
                            });
                        }
                    }
                }
            }
        });
        //全选
        $("#checkall").click(function () {
            if (this.checked) {
                $("input[name='miejunWupinbaoTiaoma']").prop('checked', true)
            } else {
                $("input[name='miejunWupinbaoTiaoma']").prop('checked', false)
            }
        });


        //保存
        $("#kaishi").click(function () {
            var btn = true;
            var chk = getSelRecord();
            var txt = $("#mjr").val();
            var chengxu = $("#mjcx").val();
            if (isNullOrEmpty(txt)) {
                btn = false;
                layer.msg("请输入灭菌人");
                return false;
            }
            if (isNullOrEmpty(chengxu)) {
                btn = false;
                layer.msg("请输入灭菌程序");
                return false;                                                 
            }
            if (chk.length > 0) {
                if (btn) {
                    showMask();
                    $.ajax({
                        type: "POST",
                        url: "${ctx}/miejun/miejunSave.do?baozhuangTiaoma=" + chk.join(),
                        data: $('.saper-form').serialize(),
                        error: function (request) {
                            layer.alert("网络故障，请稍后再试!");
                        },
                        success: function (data) {
                            $("#mask").hide();
                            if (data.state == "true") {
                                layer.msg("保存成功");
                                CreatePrintPage(data.datas);
                                window.location.href = "${ctx}/miejun/miejun.do";
                            } else {
                                layer.msg(data.msg);
                            }
                        }
                    });
                }
            } else {
                layer.msg("请选择需要灭菌的包");
            }
        });

// 	$(".softdata").live("click",function(){
// 		$(this).addClass("xuanzhong").siblings().removeClass("xuanzhong");
// 		layer.open({
// 			  type: 2,
// 			  title: '灭菌扫码',
// 			  maxmin: true,
// 			  shadeClose: true, //点击遮罩关闭层
// 			  area : ['800px' , '520px'],
// 			  content: '${ctx}/page/mj/miejun_barcode.jsp'
// 		});
// 	});
    });

    var vm = new Vue({
        el: "#app",
        data: {
            packageImformationList: [],
            dictmap: {},
            type: "",
        },
        created: function () {
            this.load();
            setInterval(function () {
                vm.load();
            }, 20000)

        },

        methods: {

            load: function (data1) {

                if (data1 != null && !isNaN(data1)) {
                    type = data1;
                }
                $.get("/miejun/miejunPackage?type=" + this.type, function (data) {
                    if (data.status == true) {
                        vm.packageImformationList = data.packageImformations;
                        vm.dictmap = data.dictmap;
//                    vm.packageImformationList = data.packageImformations;
//					console.log(vm.packageImformationList);
                    }
                })
            },

            diwen: function () {
                this.type = 2;
                this.load();
            },
            gaowen: function () {
                this.type = 1;
                this.load();
            },
            linchuang: function () {
                this.type = 3;
                this.load();
            },
            shoushushi: function () {
                this.type = 4;
                this.load();
            },
            showmingxi: function (id) {
                layer.open({
                    type: 2,
                    title: '包明细',
                    maxmin: true,
                    shadeClose: true, //点击遮罩关闭层
                    area: ['800px', '520px'],
                    content: '${ctx}/miejun/findQixieList.do?id=' + id
                });
            }
        }
    })
    function prn1_printA() {
        CreateOneFormPage();
        LODOP.PRINTA();
    };


    var LODOP; //声明为全局变量
    function myPrint() {
        CreatePrintPage();
        LODOP.PRINT();
    };
    function myPrintA() {
        CreatePrintPage();
        LODOP.PRINTA();
    };

    function myPreview() {
        CreatePrintPage();
        LODOP.PREVIEW();
    };
    function mySetup() {
        CreatePrintPage();
        LODOP.PRINT_SETUP();
    };
    function myDesign() {
        CreatePrintPage();
        LODOP.PRINT_DESIGN();
    };
    function myBlankDesign() {
        LODOP = getLodop();
        LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_空白练习");
        LODOP.PRINT_DESIGN();
    };

    function CreatePrintPage(packImfor) {
        var jiqi = packImfor[0];
        var ruanjian = packImfor[1];
        var miejuntime = packImfor[2];
        var miejunren = packImfor[3];
        var tiaoma = packImfor[4];
        LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
        console.log(name);
//            var arr = name.split("/");
        LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_名片");
        LODOP.SET_PRINT_PAGESIZE(1,70,40,"");
        LODOP.ADD_PRINT_RECT(10, 10, 256, 142, 0, 1);
        LODOP.SET_PRINT_STYLE("FontSize", 8);
        LODOP.SET_PRINT_STYLE("FontName", "微软雅黑");
        LODOP.ADD_PRINT_TEXT(10, 10, 240, 38, jiqi);
        LODOP.ADD_PRINT_TEXT(16, 160, 140, 38, ruanjian);
        LODOP.ADD_PRINT_RECT(38, 10, 256, 116, 0, 1);
        LODOP.ADD_PRINT_RECT(85, 10, 256, 116, 0, 1);
        LODOP.ADD_PRINT_TEXT(43,10,160,20,name);
        LODOP.ADD_PRINT_TEXT(56, 10, 160, 38, "时间：" + miejuntime);
        LODOP.ADD_PRINT_TEXT(43, 180, 150, 19, "灭菌人：" + miejunren);
        LODOP.SET_PRINT_STYLEA(2, "FontName", "隶书");
        LODOP.SET_PRINT_STYLEA(2, "FontSize", 14);
        LODOP.SET_PRINT_STYLEA(3, "FontSize", 11);
        LODOP.ADD_PRINT_TEXT(98, 10, 150, 19, "条码");
        LODOP.ADD_PRINT_BARCODE(90, 50, 200, 25, "Code39", tiaoma);
        //LODOP.SET_PRINT_STYLEA(0,"ShowBarText",0);
        LODOP.ADD_PRINT_TEXT(125, 10, 150, 19, "条码");
        LODOP.ADD_PRINT_BARCODE(120, 50, 200, 30, "Code39", tiaoma);
        //LODOP.SET_PRINT_STYLEA(0,"ShowBarText",0);
//        LODOP.PREVIEW();
        LODOP.PRINT();
    };




    function addPackage() {
        layer.open({
            type: 2,
            title: '添加包',
            maxmin: true,
            shadeClose: true, //点击遮罩关闭层
            area: ['800px', '520px'],
            content: "/miejun/miejunAdd"
        });
    }

    function callbackData(data) {
        var str = '';
        for (var i = 0; i < data.length; i++) {
            var package = data[i];
            str += '<tr>' +
                '<td><input type="checkbox" checked="true" name="miejunWupinbaoTiaoma" value="' + package.packageTiaoma + '"/></td>' +
                '<td>' + package.packageTiaoma + '</td>' +
                '<td>' + package.packageName + '</td>' +
                '<td>' + package.miejunFangshi + '</td></tr>';
        }
        $("#okPackage tbody").append(str);

    }

    //接受条码枪的录入
    //function callbackPackData(data){
    //	var baoArr = data;//扫码传入
    //	var baoTmArr = [];//页面显示
    //    var wybao=[];//用来提示不可录入的包条码
    //	var btnArr=[];//用来与扫描的包比较
    //    $('input[name="miejunWupinbaoTiaoma"]').each(function(){
    //    	baoTmArr.push($(this).val());
    //	});
    //    var bao=null;
    //    var baoTm=null;
    //    for(var i=0;i<baoArr.length;i++){
    //    	btnArr=[];
    //    	bao=baoArr[i];
    //    	for(var j=0;j<baoTmArr.length;j++){
    //    		baoTm=baoTmArr[j];
    //    		if(bao==baoTm){
    //    			$('input[name="miejunWupinbaoTiaoma"]').each(function(){
    //    		    	if($(this).val()==bao){
    //    		    		$(this).prop('checked',true);
    //    		    	}
    //    			});
    //
    //    		}else{
    //   	    		btnArr.push(baoTm);
    //    		}
    //    	}
    //    	if(btnArr.length==baoTmArr.length){
    //			wybao.push(bao);
    //    	}
    //    }
    //    if(wybao.length!=0){
    //		alert("不能进行操作的包:"+wybao);
    //	}
    //}

    function getParameter(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    function isNullOrEmpty(strVal) {
        strVal = strVal.replace(/(^\s*)|(\s*$)/g, "");
        if (strVal == '' || strVal == null || strVal == undefined) {
            return true;
        } else {
            return false;
        }
    }

    function showmingxi(id, name) {
        layer.open({
            type: 2,
            title: name + '包明细',
            maxmin: true,
            shadeClose: true, //点击遮罩关闭层
            area: ['800px', '520px'],
            content: '${ctx}/miejun/findQixieList.do?id=' + id + "&name=" + name
        });
    }

    function getSelRecord() {
        var chk_value = [];
        $('input[name="miejunWupinbaoTiaoma"]:checked').each(function () {
            chk_value.push($(this).val());
        });
        return chk_value;
    }
</script>
</html>